<script lang="ts" setup>
import { getSvg } from "@/utils";
import { getCountByNumber, getLevelDesc } from "../../hooks/useUtils";
withDefaults(defineProps<{ retData: Array<any>; resNumbers: Array<any> }>(), {
  retData: () => [],
  resNumbers: () => []
});
</script>
<template>
  <div
    class="w-336 mx-auto h-246 overflow-y-auto scroll-bar bg-[rgba(255,255,255,0.72)] rounded-10 px-16 py-20"
  >
    <div class="flex flex-wrap justify-start items-center gap-x-8 gap-y-10">
      <div
        v-for="(it1, idx) in retData"
        :key="idx"
        class="w-94 h-70 bg-[#fff] b-1 b-solid b-#A6D4FF rounded-10 relative"
        :style="{ height: 52 + it1.result.length * 18 + 'px' }"
      >
        <div
          class="w-62 h-20 lh-20 text-center bg-[#FFFFAD] rounded-2 absolute left-50% translate-x-[-50%] top-12 font-bold text-10 color-#004D8E"
        >
          <span>{{ it1.number }}</span>
          <div
            v-if="getCountByNumber(resNumbers, it1.number) > 1"
            class="w-19 h-19 absolute top-[-6px] right-[-6px]"
          >
            <img class="w-19 h-19" :src="getSvg('Group_35')" alt="" />
            <span
              class="absolute left-50% top-50% translate-[-50%] text-6 color-#EF196B font-bold"
              >x{{ getCountByNumber(resNumbers, it1.number) }}
            </span>
          </div>
        </div>
        <div class="h-auto absolute left-50% translate-x-[-50%] top-36">
          <div
            v-for="(it2, idx) in it1.result"
            :key="idx"
            class="w-62 h-auto flex flex-col justify-between items-center mb-4 last-of-type:mb-0"
          >
            <p class="font-normal text-6 color-[#444] text-center">
              <span class="color-#5A5A5A">{{ getLevelDesc(it2.level) }}</span>
              <span class="color-#64D64D">{{ it2?.price }} บาท</span>
            </p>
          </div>
        </div>
        <img
          class="absolute right-0 top-0 w-9 h-full"
          :src="getSvg('Intersect')"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
